<script setup>
import { message, Modal } from 'ant-design-vue';
import { onMounted, reactive, ref, toRaw, h } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import CryptoJS from 'crypto-js';
import {
	updateUser,
	getMenus,
	getProgrames,
	addUser
} from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
const account = useAccountStore();
const formRef = ref();
const menus = ref([]);
const programes = ref([]);
const labelCol = {
	span: 5
};
const wrapperCol = {
	span: 13
};
const state = reactive({
	formState: {
		account: '',
		password: '',
		level: '3',
		menus: [],
		programes: []
		// status: '',
		// lastLoginDate: '',
		// createDate: '',
		// updateDate: '',
		// deleteFlag: ''
	}
});
const router = useRouter();
const route = useRoute();

const getData = () => {
	account.spinning = true;
	getMenus({})
		.then((res) => {
			menus.value = res;
			getProgrames({})
				.then((resp) => {
					account.spinning = false;
					programes.value = resp;
				})
				.catch((err) => {
					account.spinning = false;
					message.err(err);
				});
		})
		.catch((err) => {
			account.spinning = false;
			message.err(err);
		});
};
const onSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			console.log('values', state.formState, toRaw(state.formState));
			account.spinning = true;
			if (route['query']?.id) {
				let param = {};
				if (state.formState.password) {
					param = {
						id: route['query']?.id,
						menus: state.formState.menus.join(),
						programes: state.formState.programes.join(),
						password: CryptoJS.MD5(state.formState.password).toString(),
						level: state.formState.level
					};
				} else {
					param = {
						id: route['query']?.id,
						menus: state.formState.menus.join(),
						programes: state.formState.programes.join(),
						level: state.formState.level
					};
				}
				updateUser(param)
					.then((res) => {
						account.spinning = false;
						if (account.account === state.formState.account) {
							message.success('修改成功，请重新登录', 2.5).then(() => {
								formRef.value.resetFields();
								window.location.replace('/');
							});
						} else {
							message.success('修改成功');
						}
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			} else {
				addUser({
					...state.formState,
					menus: state.formState.menus.join(),
					programes: state.formState.programes.join(),
					password: CryptoJS.MD5(state.formState.password).toString()
				})
					.then((res) => {
						account.spinning = false;
						message.success('新增成功', 2.5).then(() => {
							formRef.value.resetFields();
						});
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			}
		})
		.catch((error) => {
			message.error(error);
		});
};
const resetForm = () => {
	formRef.value.resetFields();
	router.back();
};
onMounted(() => {
	getData();
	if (route['query']?.account) {
		console.log(route['query']);
		state.formState = {
			...route['query'],
			menus: route['query'].menus.split(','),
			programes: route['query'].programes.split(',')
		};
	}
});
</script>

<template>
	<section class="contain-edit-inbound">
		<section class="edit">编辑账号信息</section>
		<a-form
			ref="formRef"
			:model="state.formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-form-item label="账号" name="account">
				<a-input v-model:value="state.formState.account" />
			</a-form-item>
			<a-form-item label="密码" name="password">
				<a-input v-model:value="state.formState.password" type="password" />
			</a-form-item>
			<a-form-item label="用户级别" name="level">
				<a-select v-model:value="state.formState.level">
					<a-select-option value="1" key="1">一级用户</a-select-option>
					<a-select-option value="2" key="2">二级用户</a-select-option>
					<a-select-option value="3" key="3">三级用户</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="权限菜单" name="menus">
				<a-checkbox-group v-model:value="state.formState.menus">
					<a-checkbox
						v-for="item in menus"
						:key="item.menuCode"
						:value="item.menuCode"
						>{{ item.menuName }}</a-checkbox
					>
				</a-checkbox-group>
			</a-form-item>
			<a-form-item
				label="数据范围"
				name="programes"
				v-if="state.formState.level === '2' || state.formState.level === '3'"
			>
				<a-checkbox-group v-model:value="state.formState.programes">
					<a-checkbox v-for="item in programes" :key="item" :value="item">{{
						item
					}}</a-checkbox>
				</a-checkbox-group>
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 5 }">
				<a-button type="primary" @click="onSubmit">确认</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
			</a-form-item>
		</a-form>
	</section>
</template>

<style scoped>
.contain-edit-inbound {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
}
.edit {
	box-sizing: border-box;
	margin: 16px 0;
	text-align: center;
	font-size: 16px;
	list-style: none;
}
</style>
